<template>
  <div style="font-size: 0.35rem">
    <p style="height: 1rem; line-height: 1rem; margin-left: 0.4rem">
      <span @click="router.back(-1)" style="float: left"><</span>
      <span style="margin-left: 2.2rem">添加收货地址</span>
    </p>
    <div>
      <div style="padding-left: 0.5rem; padding-right: 0.5rem">
        <p
          style="
            height: 1rem;
            line-height: 1rem;
            border-bottom: 1px solid #e5e5e5;
          "
        >
          <span style="width: 20%">收货人：</span
          ><input
            type="text"
            style="
              width: 65%;
              border: none;
              border-bottom: 0.01rem solid #e5e5e5;
            "
            v-model="name"
            placeholder="请输入姓名"
          />
        </p>
        <p
          style="
            height: 1rem;
            line-height: 1rem;
            border-bottom: 1px solid #e5e5e5;
          "
        >
          <span style="width: 25%">手机号码：</span
          ><input
            type="text"
            style="
              width: 70%;
              border: none;
              border-bottom: 0.01rem solid #e5e5e5;
            "
            v-model="phone"
            placeholder="请输入手机号码"
          />
        </p>
        <p
          style="
            height: 1rem;
            line-height: 1rem;
            border-bottom: 1px solid #e5e5e5;
          "
        >
          <span style="width: 25%">所在地区：</span
          ><input
            type="text"
            style="
              width: 70%;
              border: none;
              border-bottom: 0.01rem solid #e5e5e5;
            "
            placeholder="请选择所在地区"
          />
        </p>
        <p style="height: 1rem; line-height: 1rem">
          <span style="width: 25%">详细地址：</span
          ><input
            type="text"
            style="width: 72%; border: none"
            placeholder="街道门牌，无需重复地区信息"
            v-model="address"
          />
        </p>
      </div>
      <div
        style="
          border-top: 0.2rem solid #e5e5e5;
          padding-left: 0.5rem;
          padding-top: 0.5rem;
          padding-right: 0.5rem;
        "
      >
        <p>
          <span style="display: inline-block; float: right"
            ><van-switch v-model="checked"
          /></span>
          <span
            style="display: inline-block; height: 0.5rem; line-height: 0.5rem"
            >设为默认</span
          >
          <br />
          <span
            style="
              display: inline-block;
              height: 0.5rem;
              line-height: 0.5rem;
              font-size: 0.3rem;
              color: #c1c1c1;
            "
            >每次购买时会默认使用该地址</span
          >
        </p>
      </div>
      <p>
        <button
          style="
            width: 90%;
            margin-left: 5%;
            margin-top: 2rem;
            height: 1rem;
            border: none;
            background-color: #286cf5;
            color: white;
            border-radius: 0.2rem;
          "
          @click="bao"
        >
          保存
        </button>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref } from 'vue'

const name = ref('')
const phone = ref('')
const address = ref('')
const checked = ref(false)

const router = useRouter()
const bao = () => {
  const add = localStorage.setItem(
    'add',
    JSON.stringify({
      name: name.value,
      phone: phone.value,
      address: address.value,
      checked: checked.value,
    }),
  )
  router.push('/ding/receiving')
}
</script>
<style></style>
